<template>
  <div>
    <!-- <div style="width:500px;">
      <g-check-all v-model="checkedbox" @item-change="cheevent" :items="checkboxItems">
        <template #default="{ info }">{{ info.value }}</template>
</g-check-all>
</div> -->
    <div style="display: flex; width: 100%; height: 100%">
      <!-- {{ checkedbox }} -->

      <div id="ttt">
        <!-- <icon-picker v-model="value2" style="width:200px;"></icon-picker> -->
        <!-- <select-tree :data="treedatas"></select-tree> -->
      </div>
      <!--列表显示数据-->
      <div style="display: flex; width: 100%; height: 100%">
        <div
          :style="`display: flex;padding: 10px;margin: 10px;width: 150px;overflow: auto;height: calc(100vh - 40px);`">
          <g-tree draggable style="height: 100%; overflow: auto; display: flex; width: 150px"
            @delete="(a, b) => b(true)" :data="testTreeData" :default-expanded-keys="[1]" :lazy="false"
            @g-node-contextmenu="nodeContext" @tree-save="treeSave" :tree-form="{
              width: 450,
              title: '增加子级',
              commitText: () => 'save',
              formAttrs: {
                name: { title: '姓名', val: '张三', number: true }
              }
            }" @tree-open="treeOpen">
          </g-tree>
        </div>
        <div style="display: flex; width: calc(100% - 170px)">
          <g-table ref="tb" style="width: 99.9%" :tableAttrs="tdata" :horizontalShowBtns="true" @edit="edit"
            @saveData="saveData" @load="load" @del="del" @read="read" :row-style="tableRowClassName"
            :row-class-name="bb" :queryInfo="queryInfo" :queryH="false" :disFuncs="['setting', 'batch', 'more1']"
            :leftWidth="350" suffix="ok" :queryLabel="true" :justify="() => false"
            :sort="{ column: 'sale', order: 'descending' }" @row-click="rowClick" :queryInputWidth="() => 150"
            :queryLabelWidth="() => 70" :row_Drop="true" :editTable="editTable" :show-message="true" @row-drop="drop"
            @select="tbselect" @select-all="tbselect" @batch-handle="batchHandle" @expand-change="expandChange"
            @row-save="rowSave" :d-width="() => '120px'"
            :attrs="{ border: true,stripe:true, size: 'large', 'show-header': true, 'min-height': '500px' }"
            @header-click="() => test()" @qx="(item, callback) => {
              callback({
                read: () => true, //这里控制表格行查看功能
                edit: () => true, //这里控制表格行编辑功能
                del: () => false,// () => item, //这里控制表格行删除功能
                save: () => item.rowEdit == true, //这里控制表格行保存功能
                control: () => true
              });
            }
              " :btnsWidth="300" :showLeftQuery="true" popoverWidth="1000">
            <!-- :btnsWidth="390" -->
            <!-- :btnType="['success', 'danger', 'primary', 'primary']" -->
            <!-- :disFuncs="['query','edit', 'del', 'read', 'page', 'control'，'more']" -->
            <div slot="imgurl">这里可以替换表格显示内容</div>
            <!-- <el-button type="danger" slot="del" @click="del">delete</el-button> -->
            <div slot="lbtn">
              <el-button type="text" icon="el-icon-d-arrow-left" style="margin-right: 2px">左边</el-button>
            </div>
            <div slot="rbtn" slot-scope="data">
              <el-button type="text" @click="right(data.info)">右边
                <i class="el-icon-d-arrow-right"></i>
              </el-button>
            </div>
            <!-- <div slot="page">这里可以重写分页条</div> -->
            <div slot="addleft" style="display: inline-flex; flex-wrap: wrap; margin-right: 10px">
              <el-button @click="test" v-bind="btnAttrs">测试表单</el-button>
              <el-button @click="open()" v-bind="btnAttrs">加载model</el-button>
              <el-button @click="openAnimate(true)" v-bind="btnAttrs">设置动画</el-button>
              <el-button @click="changePass()" v-bind="btnAttrs">修改密码</el-button>
              <el-button @click="downloadExcel()" v-bind="btnAttrs">下载Excel</el-button>
              <el-button @click="testt(tdata, '#ttt')" v-bind="btnAttrs">add</el-button>
              <!-- <el-button @click="testt(formAttrs)" v-bind="btnAttrs">add1</el-button>
              <el-button @click="loadtable(tdata)" v-bind="btnAttrs">table</el-button> -->
              <el-button @click="xztable()" v-bind="btnAttrs">xztable</el-button>
              <el-button @click="openDownloadExcel()" v-bind="btnAttrs">下载EXCEL</el-button>
              <el-button @click="authByRole()" v-bind="btnAttrs">设置权限</el-button>
            </div>
            <!-- <div slot="querydata" style="display: flex; flex: 1">222</div> -->
            <!-- <div slot="query">这里重写查询事件</div>
            <div slot="add">这里重写增加事件</div> -->
            <!-- <div slot="more">更多</div> -->
            <!-- <div slot="edit" slot-scope="scope" v-if="scope.info.amountxs == 0">
              {{ scope.name }}
            </div> -->
            <!-- <div slot="query-age-dict" slot-scope="data">{{ data.info }}</div> -->
            <div slot="query-company-autocomplete" slot-scope="data">
              {{ data.info.value }}
            </div>
            <!-- <div slot="header-retailsale">333</div> -->
            <div slot="query-java-customize" slot-scope="data">
              <el-input v-model="data.info.val" :placeholder="data.info.remark"></el-input>
            </div>
            <!-- <div slot="setting">222</div> -->
            <!-- <div slot="more1">更多筛选</div> -->
            <!-- <div slot="goodstags" slot-scope="data">
            {{ data.info }}
          </div> -->
            <!-- <div slot="g-table">重写表格</div> -->
            <div slot="header-fl2" style="display: inline-flex">77</div>
            <div slot="fl2" style="display: inline-flex">88</div>
            <!-- <div
              slot="batch"
              slot-scope="data"
              style="display: inline-flex; margin-right: 10px"
            >
              <el-button type="primary" :plain="globlSetting.plain">{{
                "批量" + data.info.length
              }}</el-button>
            </div> -->
            <!-- <div slot="line-edit">444</div> -->
            <!-- <div slot="query-btns-right">444</div> -->
          </g-table>
        </div>
      </div>
      <!--增加form表单-->
      <!-- <g-add-form :isModel="true" :is="isshow" :fullscreen="false" :formAttrs="currdata" :formInfo="formInfo"
      :showFooter="true" @saveData="saveData" @close="isshow = undefined" :showCommitBtn="showCommitBtn"
      :showCancelBtn="true" @toDoChange="toDoChange" :border="false" :showErrMessage="() => true" :justify="() => false"
      :btnTypes="{ cancel: { type: 'info' } }"> -->
      <!-- :commitText="() => 'save'"
      :cancelText="() => 'exit'" -->
      <!-- <div slot="add-title">这里可以替换title</div> -->
      <!-- <div slot="add-footer">这里可以替换footer</div> -->
      <!-- <div slot="label-goodsname" slot-scope="data">
      <div>{{ data.info.title }}</div>
      </div> -->
      <!-- <div slot="arrgoodstags" slot-scope="scope">
        <el-input :style="`margin-right:1px;width: ${(188 - scope?.info?.arrgoodstags?.length) /
          scope?.info?.arrgoodstags?.length
          }px;`" v-for="(item, index) in scope?.info?.arrgoodstags" :key="index"
          v-model="scope?.info?.arrgoodstags[index]">
        </el-input>
      </div> -->
      <!-- <div slot="biaoji">55555555555555</div> -->
      <!-- <div slot="goodsname" slot-scope="data">
        <el-input style="width: 188px" v-model="data.info.goodsname"></el-input>
      </div> -->
      <!-- <div slot="spareRBtn" style="display: inline-flex; margin-left: 300px">
        <el-button>右边增加备用按钮</el-button>
      </div> -->
      <!-- <div slot="auto-autocomplete" slot-scope="scope">{{ scope.info }}</div>
      <div slot="sex-dict" slot-scope="scope">
        <div>性别：{{ scope.info }}</div>
      </div>
      <div slot="bj1">
        <div style="width: 655px; margin: 0px -54px 0 -10px; display: flex">
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        </div>
      </div>
      <div slot="bj2">
        <div :style="`width: 710px;margin: 0px -104px 0 -30px;display: flex;align-items: center;padding-left: 50px;`">
          <span>雨纷纷</span>
          <el-divider direction="vertical"></el-divider>
          <span>旧故里</span>
          <el-divider direction="vertical"></el-divider>
          <span>草木深</span>
        </div>
      </div>
      <div slot="upload-upload">上传</div>
      <div slot="upload-upload-tip">上传提示信息</div>
    </g-add-form> -->
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import selectTree from "el-select-tree";
import {
  openModel,
  setAnimation,
  changePassword,
  downloadExcel,
  createForm,
  createTable,
  openDownloadExcel,
} from "../index";
import { dateOptions } from "./comm";
import iconPicker from "@/ModelVueIcon/iconPicker.vue";
import { createRolePower } from "./tools";
import { demoData } from "../../public/data";
export default {
  components: { iconPicker, selectTree, setRolePower: () => import('./role-set-power.vue') },
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      checkedbox: ["重庆"],
      checkboxItems: [
        { label: '北京', value: 'beijing', fill: '#ffffff', 'text-color': '#cccccc' },
        { label: '天津北京北京北京北京北京', value: 'tianjing' },
        { label: '重庆', value: 'chongqin' },
        { label: '上海', value: 'shanghai', attrs: { disabled: false } }],
      tvm: null,
      that: null,
      testTreeData: [
        {
          label: '一级', id: 1, children: [
            { label: '二级-1', id: 2 }, { label: '二级-2', id: 3 }, { label: '二级-3', id: 4 },
          ]
        }
      ],
      treedatas: [
        {
          label: "乌鲁木齐市",
          children: [
            { label: "达坂城区", value: "7" },
            { label: "头屯河区", value: "8" },
            { label: "乌鲁木齐县", value: "9" },
          ],
        },
      ],
      value2: "",
      editTable: false,
      currdata: {},
      showCommitBtn: true,
      formInfo: undefined,
      isshow: undefined,
      formAttrs: {
        username: {
          title: "姓名",
          val: "刘麻子",
          required: true,
          width: 202,
          trigger: "change",
          //regular: "[A-Z0-9]{2,5}",
          validate: (a, form) => {
            return a.length !== 4;
          },
        },
        age: {
          title: "年龄",
          val: 18,
          number: true,
          width: 202,
          max: 100,
          min: 16,
          trigger: "change",
        },
        company: { title: "公司", val: "", max: 10, width: 202 },
        sex: {
          title: "性别",
          val: "0",
          dicts: [
            { label: "男", value: "1" },
            { label: "女", value: "0" },
          ],
          change: (a, b) => {
          },
          query: (words, callback) => {
            callback([
              { label: "男", value: "1" },
              { label: "女", value: "0" },
            ]);
          },
        },
        date: {
          title: "日期",
          val: "",
          required: true,
          date: true,
          options: {
            disabledDate(time) {
              return time.getTime() > Date.now() + 12 * 3600 * 7;
            },
            shortcuts: [
              {
                text: "一年后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 12);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "半年后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 6);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一月后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 1);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周后",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "今天",
                onClick(picker) {
                  picker.$emit("pick", new Date());
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一月前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 1);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "三月前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 3);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "半年",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 6);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一年前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 12);
                  picker.$emit("pick", date);
                },
              },
            ],
          },
          //time: true,
          change: (data) => {
            console.log(data);
          },
        },
        time: {
          title: "时间",
          required: true,
          val: "",
          time: true,
          date: true,
          change: (data) => {
            console.log(data);
          },
        },
        leval: {
          title: "等级",
          required: true,
          val: 3,
          radio: [1, 2, 3],
          labels: ["大", "中", "小"],
          change: (data) => {
            console.log(data);
          },
        },
        bj1: { bj: true, itemLabelWidth: 0 },
        hobby: {
          title: "爱好",
          val: [10],
          checkbox: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          labels: [
            "乒乓球",
            "跑步",
            "吃鱼",
            "打球",
            "开车",
            "看书",
            "打游戏",
            "上网",
            "cosplay",
            "movie",
          ],
          width: 624,
          change: (data) => {
            console.log(data);
          },
        },
        remark: {
          title: "备注",
          val: "",
          area: true,
          width: 624,
          max: 200,
          rows: 2,
        },
        bj2: { bj: true, itemLabelWidth: 0 },
        email: {
          title: "邮箱",
          val: "myemail@qq.com",
          email: true,
          required: true,
          width: 624,
        },
        auto: {
          title: "自动加载",
          val: "",
          autocomplete: true,
          triggerOnFocus: false,
          popperAppendToBody: true,
          valueKey: "name",
          input: (a, form) => {
            console.log(a, form);
          },
          fetch_suggestions: (querystr, back) => {
            back([{ name: "222" }, { name: "333" }]);
          },
          auto_select: (a, b) => {
            console.log(a, b);
          },
          width: 624,
        },
        switch: {
          title: "开关",
          switch: true,
          val: 1,
          // trueColor: "red",
          // falseColor: "blue",
          activeValue: 1,
          switchWidth: 100,
          change: (data) => {
            console.log(data);
          },
        },
        upload: {
          title: "上传",
          val: "",
          upload: true,
          fileList: [],
          action: "https://jsonplaceholder.typicode.com/posts/",
          listType: "picture",
        },
        icon: {
          title: "图标",
          icon: true,
        },
        tree: {
          title: "下拉树",
          tree: true,
          val: "8",
          required: true,
          attrs: {
            data: [
              {
                label: "乌鲁木齐市",
                value: "2",
                children: [
                  { label: "达坂城区", value: "7" },
                  { label: "头屯河区", value: "8" },
                  { label: "乌鲁木齐县", value: "9" },
                ],
              },
            ],
            filterable: true,
            "show-checkbox": true,
          },
        },
        rate: {
          title: "星级",
          val: 5,
          rate: true,
          attrs: {
            //style: "height:60px",
          },
        },
      },
      tdata: {
        goodsid: {
          title: "配件ID",
          val: 0,
          number: true,
          //visible: false,
          type: "expand",
        },
        // goodstags: {
        //   title: "标签",
        //   val: "",
        //   col_width: 100,
        //   // suffix: true, // "el-icon-edit",
        //   // prefix: "$",
        //   password: false,
        //   disable: true,
        //   // alwaysShow: true,
        //   num: -100,
        //   tooltip: true,
        //   click: (data) => {
        //     alert("hello world!");
        //   },
        // },
        amount: {
          alwaysShow: true,
          num: 11,
          title: "数量",
          required: true,
          // filterClass: "arrgoodstags",
          // editTable: true,
          required: true,
          val: undefined,
          placeholder: "输入数字",
          number: true,
          // regular: "\\d+",
          tooltip: true,
          prefix: "￥",
          col_width: 120,
          required: true,
          trigger: "blur",
          decimals: 2,
          //suffix: "<B style='color:red;'>元</B>",
          click: (data) => {
            //todo()
          },
          change: (data) => {
            console.log(data);
          },
          attrs: { align: "left" },
          // input: (a, b) => {
          //   console.log(a, b);
          // },
        },
        biaoji: {
          title: "标记",
          sortable: false,
          visible: false,
          'show-word-limit': false,
          // filterClass: "arrgoodstags",
          children: [
            { key: "fl1", title: "标记一", val: 1 },
            {
              key: "fl2",
              title: "标记二",
              val: "5555",
              number: true,
              html: (b, a) => {
                return "<div style='color:red'>098</div>";
              },
              // autocomplete: true,
              // valueKey: "name",
              // fetch_suggestions: (querystr, back) => {
              //   back([{ name: "222" }, { name: "333" }]);
              // },
              // auto_select: (a, b) => {
              //   alert(1);
              //   console.log(a, b);
              // },
              width: 624,
            },
          ],
        },
        wareid: {
          title: "配件编号",
          val: 0,
          num: 8,
          number: true,
          visible: false,
          edit: false,
        },
        // arrgoodstags: {
        //   title: "TB标签",
        //   val: ["", "", ""],
        //   sortable: false,
        //   filterClass: "arrgoodstags",
        //   num: -101,
        //   editTable: true,
        // },
        retailsale: {
          title: "成功价",
          val: 0,
          number: true,
          //range: [1, 10],
          col_width: 120,
          sortable: false,
          //suffix: "$",
          decimals: 2,
          //  editTable: true,
          clearable: true,
          required: true,
          filters: (a) => {
            return a.tableData.ruleData.map((a) => {
              return { text: a.sale, value: a.sale };
            });
          },
          filterMethod: (value, row, column, t) => {
            return row.sale < value;
          },
        },
        goodsname: {
          title: "配件名称",
          val: "555",
          tooltip: true,
          //visible: false,
          // num: 2,
          // max: 5,
          required: true,
          //editTable: true,
          clearable: true,
          col_width: 200,
          formart: "6666",
          max: 100,
          style: (a, b, c) => {
            return c % 2 == 0
              ? { color: "red", background: "blue", padding: "10px" }
              : "";
          },
          range: [4, 30],
          change: (a) => {
            // console.log(a);
          },
        },
        imgurl: { title: "图片路径", val: "mall/00ef4g", tooltip: true, max: 100, 'show-word-limit': false },
        sale: {
          title: "销售价",
          val: 865.0,
          number: true,
          // decimals: 2,
          // suffix: "$",
          prefix: "￥",
          // editTable: true,
          change: (v) => {
            console.log(v);
          },
        },
        amountxs: {
          title: "销售数量",
          val: 20,
          number: true,
          // editTable: true,
          placeholder: "20-60之间",
          // range: [20, 60],
          col_width: 120,
          //regular: "[2-5]\\d",
          suffix: "$",
          decimals: 2,
        },
        statetag: {
          title: "状态",
          val: 0,
          //multiple: true,
          rate: true,
          dicts: [
            { label: "禁用", value: 0 },
            { label: "启用", value: 1 },
            { label: "未知", value: 2 },
          ],
          query: (words, callback) => {
            console.log(1);
            callback([{ label: "禁用", value: 0 },
            { label: "启用", value: 1 },
            { label: "未知", value: 2 },])
          },
          goAdd: (a, b) => { },
          collapseTags: true,
          multipleLimit: 2,
          blur: (a, b) => {
            console.log(b);
          },
          change: (a, b, c) => {
            console.log(b);
          },
        },
        jbstr: {
          title: "角标",
          val: "",
          width: 624,
          placeholder: "请输入a",
          clearable: true,
          // regular: "[a]",
          //required: true,
          //  editTable: true,
        },
        remark: {
          title: "备注",
          val: "Thermo King 。",
          tooltip: true,
          // "tooltip-width": 500,
          //'tooltip-trigger': 'click',
          area: true,
          width: 624,
          num: 10000,
          max: 200,
          rows: 5,
        },
        span: {
          title: "文本框",
          val: "<b style='color:red;'>5678</b>",
          span: true,
          num: -10000,
        },
      },
      queryInfo: {
        vis: {
          val: "99",
          remark: "888",
          label: "测试",
          inVisible: true,
        },
        test: {
          val: "",
          remark: "测试查询",
          clearable: true,
          label: "测试查询",
          // more: true,
          //labelWidth: 400,
          //width: 300,
          attrs: { type: "number" },
        },
        username: {
          val: "",
          remark: "请输入姓名",
          label: "姓名",
          date: true,
          //width: 1000,
          // more: true,
          //labelWidth: 400,
        },
        age: {
          val: 0,
          remark: "年龄查询",
          label: "年龄查询",
          more: true,
          dicts: [
            { label: "男", value: 0 },
            { label: "女", value: 1 },
          ],
          query: (a, b) => {
            b([
              { label: "男", value: 0 },
              { label: "女", value: 1 },
            ]);
          },
          change: (form, item) => {
            console.log(form);
            console.log(item);
          },
        },
        maxdate: {
          val: "",
          remark: "开始时间",
          label: "开始时间",
          clearable: true,
          date: true,
          more: true,
          attrs: { editable: false },
          dateOptions: dateOptions,
          change: (a) => {
            console.log(a);
          },
        },
        mindate: {
          val: "",
          remark: "结束时间",
          label: "结束时间",
          clearable: true,
          date: true,
          //more: true,
        },
        timespan: {
          keys: ["atime", "atime1"],
          vals: [new Date(), new Date()],
          remark: "时间段查询",
          label: "时间段查询",
          clearable: true,
          daterange: true,
          more: true,
          width: 240,
          attrs: { editable: false },
          change: (a, b) => {
            console.log(a, b);
          },
        },
        bs: {
          keys: ["btime", "btime1"],
          vals: ["", ""],
          remark: "时间段查询",
          label: "时间段查询",
          clearable: true,
          daterange: true,
          more: true,
          width: 240,
          change: (val) => {
            console.log(val);
          },
        },
        company: {
          key: "company",
          val: "",
          remark: "自动查询",
          label: "自动查询",
          //valueKey: "value",
          autocomplete: true,
          more: true,
          fetch_suggestions: (a, b) => {
            b([{ value: 122 }]);
          },
          auto_select: (iten) => {
            alert(iten);
          },
        },
        java: {
          val: "",
          remark: "定制",
          label: "定制",
          customize: true,
          more: true,
        },
      },
      // sumData: { amount: 0, goodstags: "合计" },
      selectRow: [],
      obj: {
        is: undefined, // this.isshow,
        formAttrs: undefined, // this.formAttrs,
        formInfo: undefined, // this.formInfo,
      },
      btnAttrs: {
        circle: this.globlSetting.globleBtnStyle.circle,
        round: this.globlSetting.globleBtnStyle.round,
        plain: this.globlSetting.globleBtnStyle.plain,
        size: this.globlSetting.globleBtnStyle.size,
        type: this.globlSetting.globleBtnStyle.type,
      },
    };
  },
  methods: {
    cheevent(val, b) {
      console.log(val);
      console.log(b);
    },
    authByRole(role) {
      createRolePower('admin', {
        batchAuthMenus: (val, id, b) => {
          console.log(val, id);
          b()
        }
      }, true)
    },
    treeOpen(data) {
      console.log(data);
      data.formAttrs.name.title = "排序"
      data.formAttrs.plabel.edit = false;
    },
    treeSave(data, back) {
      back(true)
    },
    nodeContext({ data }, func) {
      func({ add: false, edit: true, refresh: true, del: false })
    },
    openDownloadExcel() {
      openDownloadExcel(
        [
          { label: "测试0", value: 0 },
          { label: "测试1", value: 1 },
          { label: "测试2", value: 2 },
          { label: "测试3", value: 3 },
          { label: "测试4", value: 4 },
        ],
        (val) => {
          console.log(val);
        },
        // {
        //   title: '2000px'
        // },
        {}
        // '444'
      );
    },
    xztable() {
      this.tvm.$destroy();
      this.tvm = null;
    },
    loadtable() {
      this.tvm = createTable("#ttt", {
        attrs: {
          tableAttrs: this.tdata,
          queryInfo: {},
        },
        on: {
          load: (data, call) => call([]),
        },
      });
    },
    testt(col, el) {
      createForm(
        {
          attrs: {
            formAttrs: col,
            commitText: () => "555",
            formInfo: this.formInfo,
          },
          on: {
            //close: () => { alert(666) },
            saveData: (a, back) => {
              console.log("okkk");
              back({}, true, b => b(true))
            },
          },
          scopedSlots: {
            username: () => "8989",
            sex: ({ info }) => {
              return "男";
            },
            bj1: () => "3333",
            bj2: () => {
              return <div>4444555</div>;
            },
          },
        },
        el
      );
    },
    downloadExcel() {
      downloadExcel(MessageBox, "test", "test", {
        message: "你确定要下载这个excel吗？",
        title: "下载提示",
        iconClass: "el-icon-s-home",
      });
    },
    openAnimate(num) {
      return setAnimation(num);
    },
    changePass() {
      changePassword({
        attrs: {
          formInfo: {
            oldPassword: 9999,
            password: 997777,
          },
        },
        on: {
          close: (b) => b(1),
          changePassword: (v, b) => {
            console.log(v, b());
          },
        },
      });
    },
    open1() {
      alert(2)
      let vm = openModel({
        //"components/test",
        // url: "components/test",
        url: "components/HelloWorld"
      })
    },
    open() {
      let vm = openModel({
        //"components/test",
        // url: "components/test",
        //url: "components/HelloWorld",
        attrs: {
          // title: "这是一个测试程序",
          //center: true,
          //fullscreen: true,
          width: "730px",
          title: '测试表单1打开',
        },
        on: {
          close: () => alert(2),
          save: (back) => {
            // back();
            // back(false, () => {
            //   alert();
            // });
            //back("333");
            //back("保存信息失败！！！");
            back(true, () => {
              alert("ok");
            });
          },
        },
        scopedSlots: {
          title: () => <b style={{ color: 'red' }}>444</b>,
          default: () => {
            let close = () => {
              vm.$destroy();
            };
            return (
              <div style={{ paddingBottom: "20px" }}>
                <g-add-form
                  isModel={false}
                  title={'测试表单打开'}
                  formAttrs={this.tdata}
                  formInfo={this.formInfo}
                  onSaveData={close}
                  showCommitBtn={this.showCommitBtn}
                  toDoChange={this.toDoChange}
                  showErrMessage={() => true}
                  onClose={close}
                  center={() => 'center'}
                ></g-add-form>
              </div>
            );
          },
          //  footer: (a) => {},
          // title: (a) => (
          //   <div class="title" title={a.title}>
          //     这是自定义标题插槽
          //   </div>
          // ),
        },
      });
    },
    expandChange(row, b) {
      console.log(row, b);
    },
    right(row) {
      console.log(row);
    },
    rowSave(row, index, back) {
      console.log(row, index);
      this.$set(row, "rowEdit", undefined);
      back(false);
    },
    batchHandle(data) {
      console.log(data);
    },
    tbselect(selection) {
      console.log(selection);
    },
    drop({ oldIndex, newIndex }) {
      console.log({ oldIndex, newIndex });
    },
    //-------------------------------------------------------tree---------------------------------------------------
    treeAdd(data) {
      data.formAttrs.plabel.title = '999'
      // this.tree_col.superior.edit = undefined;
      // data.superior = node.cbname;
      // data.itemName = "";
    },
    treeUpdate(data) {
      // this.tree_col.superior.edit = false;
      // data.itemName = node.cbname;
    },
    async loadDataById(node, resolve) {
      if (node.level == 0) {
        return resolve([
          {
            pcbid: 0,
            cbid: 0,
            cbname: "所有品牌",
            lastnode: 0,
            id: 0,
          },
        ]);
      } else {
        return resolve([
          {
            cbname: "长安",
            pcbid: 0,
            cbid: 100,
            noused: 0,
            lastnode: 0,
            fullname: "长安",
          },
          {
            cbname: "比亚迪",
            pcbid: 0,
            cbid: 101,
            noused: 0,
            lastnode: 0,
            fullname: "比亚迪",
          },
          {
            cbname: "哈弗",
            pcbid: 0,
            cbid: 191,
            noused: 0,
            lastnode: 0,
            fullname: "哈弗",
          },
          {
            cbname: "日产",
            pcbid: 0,
            cbid: 211,
            noused: 0,
            lastnode: 0,
            fullname: "日产",
          },
          {
            cbname: "奥迪",
            pcbid: 0,
            cbid: 225,
            noused: 0,
            lastnode: 0,
            fullname: "奥迪",
          },
          {
            cbname: "奔驰",
            pcbid: 0,
            cbid: 302,
            noused: 0,
            lastnode: 0,
            fullname: "奔驰",
          },
        ]);
      }
    },
    //--------------------------------------------------------------------------------------------------------------
    tableRowClassName({ row, rowIndex }) {
      let styleRes = {
        // background: "red !important",
      };
      return styleRes;
    },
    bb() {
      //return "bb";
      return "";
    },
    rowClick(row, column, event) {
    },
    toDoChange(data) {
      if (data.ov.sale !== undefined && data.nv.sale != data.ov.sale) {
      }
    },
    //测试表单
    test() {
      // this.that.add()
      openModel({
        attrs: { title: '全选', width: '450px' },
        scopedSlots: {
          default: () => <g-check-all items={this.checkboxItems} v-model={this.checkedbox}></g-check-all>
        }
      })
    },
    //初始数据
    async load(obj, callback, t) {
      obj.pagesize = 10;
      let { list, total } = demoData.data;
      let page = parseInt(obj.page);
      let pagesize = parseInt(t.pagesize);
      callback(list.filter((a, index) => index > (page - 1) * pagesize && index <= (page * pagesize)), total, (a, b) => a.goodsid == b.goodsid);
      // this.sumData = {
      //   amount: 1022200,
      //   goodstags: "合计",
      //   remark: "合计备注",
      //   remark1: "合计备注",
      //   retailsale: 3000,
      // };
      this.that = t;
    },
    //增加
    add(row) {
      row(() => {
        this.formInfo = undefined;
        this.currdata = this.tdata;
        this.showCommitBtn = true;
        this.isshow = "g-add-form";
        return true;
      })
      // row(() => {
      //   this.formInfo = undefined;
      //   this.currdata = this.tdata;
      //   this.showCommitBtn = true;
      //   this.isshow = "g-add-form";
      // })

      //row();
      // if (row) {
      //   this.$set(row, "rowEdit", true);
      // } else {
      //   this.formInfo = undefined;
      //   this.currdata = this.tdata;
      //   this.showCommitBtn = true;
      //   this.isshow = "g-add-form";
      // }
    },
    //删除
    del(data, callback) {
      alert("ok");
      callback(true);
      //callback("删除失败了");
    },
    //编辑
    edit(data, back) {
      // alert(2)
      // back(() => {
      //   setTimeout(() => {
      //     this.currdata = this.tdata;
      //     this.showCommitBtn = true;
      //     this.formInfo = data;
      //     this.isshow = "g-add-form";
      //     alert(666)
      //     return true;

      //   }, 3000);
      // })

      // if (this.editTable) {
      //   this.$set(data, "rowEdit", true);
      // } else {
      //   // let dict = this.tdata.statetag.dicts;
      //   // dict.dicts = [{ label: "禁用", value: 1 }];
      //   // dict.val = data.statetag;
      //   this.currdata = this.tdata;
      //   this.showCommitBtn = true;
      //   this.formInfo = data;
      //   this.isshow = "g-add-form";
      // }
    },
    //查看详情
    read(data, back) {
      // back((form) => {
      //   form.amount = 1010101;
      //   this.currdata = this.tdata;
      //   this.showCommitBtn = false;
      //   this.formInfo = data;
      //   this.isshow = "g-add-form";
      //   return false;
      // })

    },
    //保存数据
    saveData(data, callback) {
      //callback({isadd:false});
      // setTimeout(() => {
      //   callback({ isadd: false, closeForm: true, resetForm: false })
      // }, 1000);     
      // callback({ isadd: false, closeForm: true, savedData: { id: 1 }, resetForm: false });
    },
  },
  mounted() {
    //this.$refs.ttb.get_data_list(1, { aa: "55" });
    let a = this.openAnimate(false);
  },
};
</script>
<style>
.bb {
  background: gray !important;
}

/* 
.funs {
  flex-direction: column;
}

.query-top {
  width: 100%;
  display: flex;
} 
.query-btns {
  width: 100%;
  padding: 10px 10px 10px 50px;
  display: flex;
}

.query-btns-left {
  display: flex;
  flex: 1;
}*/

.title {
  display: flex;
  font-weight: bold;
}
</style>
